<template>
  <div class="login">
    <div class="mask">
      <img src="../../assets/imgs/map.jpeg" class="logo" />
    </div>
    <div class="inner scroll-base" @keydown.enter="login">
      <h1 class="title">{{ user.title }}</h1>
      <el-input
        class="in-put"
        placeholder="请输入用户名"
        v-model="user.name"
        @input="noSpace"
        clearable
      >
        <template #prefix>
          <i class="iconfont icon-yonghudenglu"></i>
        </template>
      </el-input>
      <el-input
        class="in-put"
        placeholder="请输入密码"
        v-model="user.psw"
        @input="noSpace"
        show-password
      >
        <template #prefix>
          <i class="iconfont icon-mima"></i>
        </template>
      </el-input>
      <el-input class="in-put" placeholder="请输入验证码" v-model="user.vCode">
        <template #prefix>
          <i class="iconfont icon-yanzhengma"></i>
        </template>
        <template #suffix
          ><verify-code ref="V_CODE_LOGIN" style="margin-right: -12px"
        /></template>
      </el-input>
      <p>
        <!-- <el-link type="primary">忘记密码</el-link> -->
      </p>
      <el-button
        type="primary"
        style="width: 100%; height: 42px; margin: 10px 0"
        :loading="user.loading"
        @click="login()"
      >
        登 录
      </el-button>
      <p class="tip">
        <a href="http://www.firefox.com.cn/download/thanks/" target="_blank">推荐使用火狐浏览器</a>
      </p>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import VerifyCode from "./VerifyCode.vue";
import { getCurrentInstance } from "vue";
import { ElNotification } from "element-plus";
import util from "@/assets/js/util";
import http from "@/axios/http";
import mqtt from "@/assets/js/mqtt";
export default {
  components: {
    VerifyCode,
  },
  setup() {
    const Global = getCurrentInstance().proxy;
    let user = reactive({
      name: "",
      psw: "",
      vCode: "",
      loading: false,
      title: Global.$const.APP_TITLE,
      mqttClientId: null,
      mqttUsername: null,
    });
    let router = useRouter();
    let V_CODE_LOGIN = ref(null);

    function login() {
      if (user.loading) return
      mqtt.close();
      let msg = ''
      if (util.isNull(user.name)) {
        msg = '用户名不能为空'
      } else if (util.isNull(user.name)) {
        msg = '密码不能为空'
      } else if (V_CODE_LOGIN.value.imgCode.toLowerCase() !== user.vCode.toLowerCase()) {
        msg = '验证码错误'
      }
      if (!util.isNull(msg)) {
        ElNotification({
          title: msg,
          type: "warning",
          duration: 1500,
        })
        vCodeRefresh()
        return
      }
      user.loading = true;
      mqtt.login(user.name, user.psw, (t, m) => {
        let r = null
        if (t == 'success') {
          user.mqttClientId = m.clientId
          user.mqttUsername = m.username
        } else if (t == 'fail' || m == undefined) {
          user.loading = false;
          user.vCode = "";
          vCodeRefresh()
          return;
        }
        if (typeof(m) == 'object') r = m
        if (typeof(m) == 'string') {
          try {
            r = JSON.parse(m)
          } catch (error) {
            user.loading = false;
            user.vCode = "";
            vCodeRefresh()
          }
        }
        if (r && r.msgType) {
          if (r.msgType == 40 && r.data.returnCode == 10000) {
            let d = r.data.data;
          //console.log(d)
            Global.$var.user.code = d[0].Id;
            Global.$var.user.id = user.mqttClientId;
            Global.$var.user.username = user.mqttUsername;
            Global.$var.user.phone = d[0].phone.split('QBAndroidPlat@')[1];
            Global.$var.user.name = d[0].name;
            Global.$var.user.avatar = Global.$const.USER_AVATAR;
            Global.$var.user.power = 79;
            if (d[0].plat_user.scope.length == 8) Global.$var.user.power = 89;
            if (d[0].plat_user.scope.length == 4) Global.$var.user.power = 99;
            Global.$var.user.clientId = d[0].plat_user.Id;
            Global.$var.user.clientName = d[0].plat_user.name;
            Global.$var.user.platUser = d[0].plat_user;
            Global.$var.user.status = d[0].status;
            Global.$var.user.dtCreate = util.formatGmt(d[0].create_date);
            Global.$var.user.token = "token";
            Global.$var.adminFun = [];
            util.elTabStatus("init");
            // getOperaPower(user.mqttClientId,user.mqttUsername)
            router.push("/main");
          } else {
            user.loading = false;
            user.vCode = "";
          }
        } else {
          user.loading = false;
          user.vCode = "";
        }
      });
    }

    function vCodeRefresh() {
      if (V_CODE_LOGIN.value) V_CODE_LOGIN.value.handleDraw()
    }

    function getOperaPower(cid,uname) {
      let msgCode = 57
      let topic = mqtt.TOPIC_REQ+msgCode
      let g = {}
      g.msgType = msgCode
      g.clientId = cid
      g.userName = uname
      let m = {}
      m.indexPage = 1
      m.pageSize = 1000
      g.message = m
    //console.log(topic,g)
      mqtt.publish(topic,JSON.stringify(g))
      mqtt.onMsg((t,m)=>{
      //console.log(t,m)
      })
    }
    
    function noSpace() {
       user.name = user.name.replace(/\s/g, '');  
       user.psw = user.psw.replace(/\s/g, '');  
    }

    return {
      user,
      V_CODE_LOGIN,
      login,
      noSpace,
    };
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: calc(100vh);
  // background: url('../assets/imgs/map.jpeg') no-repeat;
  background-size: 100% 100%;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh);
    background-image: linear-gradient(
      to right,
      rgb(129, 232, 250),
      rgba(255, 0, 0, 0)
    );
    .logo {
      position: fixed;
      top: 12%;
      right: 15%;
      opacity: 0.1;
    }
  }
  .inner {
    @extend %view-flex;
    width: 300px;
    position: fixed;
    top: 30%;
    right: 25%;
    background-color: rgba(254, 254, 254, 0);
    // border: 1px solid #eee;
    // box-shadow: 1px 1px 1px #ccc;
    .title {
      margin: 20px 0;
      margin-top: -40px;
      color: $color-primary;
      white-space: nowrap;
      text-shadow: 1px 1px 1px #eee;
      font-size: 32px;
    }
    .in-put {
      margin: 8px;
      height: 42px;
    }
    p {
      display: block;
      width: 100%;
      text-align: right;
      margin: 0;
      padding: 3px 10px;
      box-sizing: border-box;
    }
    .iconfont {
      font-size: 24px;
    }
    .tip{
      text-align: center;
      a{
        font-size: 14px;
        color: #999;
        direction: no;
      }
    }
  }
}
</style>